import React, {Component} from 'react';
/*在react里面定义类组件要使用 class 关键字 class关键字是es6提供的，用于编写一个类*/

/*
* 1. 类组件的名称和组件目录的文件或者组件文件的名称一致
* 2. 类组件必须继承react里面的提供的 React.Component 组件
* 3. 类组件必须实现一个render方法，并且render方法返回一个合法的jsx元素
*
* */
/*class User extends React.Component {
    render() {
        return (
            <div>
                <h2>我是一个类组件</h2>
            </div>
        )
    }

}*/

/*简化写法
* 我们可以把 Component 直接解构导出
* import React, {Component} from 'react';
* */
import './user.css';

/*
* 如果在我们组件要使用图片的时候，有如下几种方案：
* 1. 图片放置到 public目录下进行管理，则要使用 /xxx目录/xxx图片文件名即可
* 2. 一般有的时候，我们会把图片放置到 src/assets/imgs目录下
* 则这个时候，我们就要进行导入使用
* import fj from  '../../assets/imgs/fj.png';
*
* */
import fj from '../../assets/imgs/fj.png';

class User extends Component {

    /*组件的数据我们是通过一个 state 属性进行定义的 */
    // state 是一个对象
    state = {
        title: '我是title信息',
        arr: [12, 23, 34],
        isBool: true,
        obj: {id: 1, username: 'andy', email: "gogery@163.com"},
        userList: [
            {id: 1, username: 'andy', email: "gogery@163.com"},
            {id: 2, username: 'mark', email: "mark@163.com"},
        ]
    }

    clickHandler(e) {
        console.log('clickHandler', e, e.target);
    }

    changeTitleHandler() {
        console.log('changeTitleHandler', this); // undefined
        /*
         当我们在事件的回调函数里面通过 this 查找自身的 state 状态的时候，进行报错。这是为什么呢？
         // 主要的原因是 react 里面为了放置用户搞不清楚 事件回调函数里面的
         1. this到底是当前的 dom 对象，
         2. 还是当前的 组件对象
         3. 直接将this定义为了 undefined；
         4. 我们需要自己手工的去确定 this执行。由于我们是在事件回调函数里面做状态数据的的获取，状态数据属于当前组件实例对象，所有这里的this我们应该改为当前的组件实例对象。

        index.js:58 Uncaught TypeError: Cannot read properties of undefined (reading 'state')
        * */
        // this.state.title = '我是最新的 title 信息！'; // 1. 修改数据
        // this.setState({}); // 2. 手工的触发
        // 在 react 里面，类组件如果修改 state 状态，不会自动的进行视图的更新，需要开发者使用setState进行触发 1. 修改数据 2. 更新视图
        this.setState({
            title: '我是最新的 title 信息！'
        }, ()=>{
            console.log(this.state.title, 'setState 提供第二个参数是一个回调函数，在这个回调函数里面，我们可以获取到最新的state');

        });
        console.log(this.state.title, '查看title信息，到底是修改前的，还是修改后的。修改前的数据');
        /*
        *
        * setState 的特点
        * 1. 参数是一个对象，该对象就是我们要修改的数据。修改后会自动和state进行合并，并不是覆盖，如果传递的对象，只是修改了state里面的某个属性，其他的属性还是会被保留的，不会进行覆盖。类似 ： Object.assgin( this.state, {title: '我是最新的 title 信息！'}  )
        *
        * 2. setState 是异步的，修改数据后，并不会立马显示最新的数据
        *
        * */
        // console.log(this.state);


    }

    render() {
        return (
            <div style={{color: '#f00'}}>
                <h2>我是一个类组件</h2>
                <h3>图片显示方案1</h3>
                <img src="/imgs/fj.png" alt=""/>
                <hr/>
                <h3>图片显示方案2</h3>
                <img src={fj} alt=""/>
                <p>
                    1. 结构 2. 样式 3. 行为 4. 数据（1. 组件自己维护的数据叫做 state ，其次有的时候我们如果要修改数据该如何处理 2. 除了 state
                    ，组件还可以通过调用传递属性进行数据的展示） 5. 生命周期函数
                </p>
                <h3>图片显示方案3</h3>
                <div className="box">
                    {/*希望 fj图片作为背景图使用*/}
                </div>
                <hr/>
                <h2>state数据的显示</h2>
                <h3>{this.state.title}</h3>
                {/*方案2：使用箭头函数方式确保this指向当前的组件实例对象*/}
                <button onClick={()=>{

                    this.changeTitleHandler();

                }}>点击变更title的内容</button>
                <ul>
                    {
                        this.state.arr.map(item => {
                            return (
                                <li key={item}>{item}</li>

                            )
                        })
                    }
                </ul>
                <hr/>
                <h3>用户列表</h3>
                {
                    this.state.userList.map(item => {
                        return (
                            <ul key={item.id}>
                                <li>序号：{item.id}</li>
                                <li>用户名：{item.username}</li>
                                <li>邮箱：{item.email}</li>
                            </ul>
                        )
                    })
                }
                <button onClick={this.clickHandler}>点击我弹出一个信息</button>
            </div>
        )
    }
}

export default User;
